<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test6</title>
</head>
<body>
<h1 style="text-align: center">HTML复习历程-6</h1>
<div>
    <button type="button" onclick="withAndHeight()">获取窗口宽高</button>
    <p id="winWH"></p>
    <p id="availWH"></p>
    <button type="button" onclick="opWindow(1)">收缩窗口</button>
    <button type="button" onclick="opWindow(2)">移动窗口</button>
    <button type="button" onclick="opWindow(3)">打开新窗口</button>
    <button type="button" onclick="opWindow(4)">关闭当前窗口</button>
    <br>
    <hr>
    <button type="button" onclick="winLoc()">Window Location</button>
    <p id="winLoc"></p>
    <button type="button" onclick="newDoc(0)">页面覆盖</button>
    <button type="button" onclick="newDoc(1)">页面替换</button>
</div>
<script>
    function withAndHeight() {
        var wi = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
        var he = window.innerHeight || document.documentElement.clientWidth || document.body.clientHeight
        document.getElementById("winWH").innerText = "浏览器窗口宽度："+wi+",高度："+he

        var vW = window.screen.availWidth
        var vH = window.screen.availHeight
        document.getElementById("availWH").innerText = "屏幕可用宽度："+vW+",高度："+vH
    }
    function opWindow(tag) {
        switch (tag) {
            case "1":
                window.resizeTo(300, 300)
                break
            case "2":
                window.moveTo(100, 1000)
                break
            case "3":
                window.open("https://www.baidu.com")
                break
            default:
                window.close()
                break
        }
    }
    function winLoc() {
        var winL = document.getElementById("winLoc")
        winL.innerText = "web协议："+location.protocol+"\nhostname:"+location.hostname
            +"\npathname:"+location.pathname+"\n"+location.port+"\nhref:"+location.href
    }
    function newDoc(tag) {
        if (0 == tag){
            window.location.assign("https://www.baidu.com")
        }else {
            window.location.replace("https://www.baidu.com")
        }
    }
</script>
</body>
</html>
